<template>
    <!-- 头部 -->
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()">
        <template #right>
            <van-icon name="ellipsis" />
        </template>
    </van-nav-bar>
    <!-- 订单标签 -->
    <van-tabs v-model:active="active">
        <van-tab v-for="item in tabs" :key="item.state" :title="item.text">
        </van-tab>
    </van-tabs>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item.orderId">
            <template #default="orderItem">
                <div class="order">
                    <p class="top">
                        <span>订单时间:{{ item.createTime }}</span>
                        <span> {{ item.orderStatusString }}</span>
                    </p>
                    <div v-for="v in item.newBeeMallOrderItemVOS" :key="v.goodsId" class="cent">
                        <img style="width:100px" :src="v.goodsCoverImg" alt="">
                        <p class=''>名称:{{ v.goodsName }}</p>
                        <p>价格:{{ v.sellingPrice }}</p>
                    </div>
                    <p class="total">总价格:{{ item.totalPrice }}</p>
                </div>
            </template>
        </van-cell>
    </van-list>
</template>
<script setup>
import { reactive, ref, watch } from "vue"
import { getOrderList } from "@/api/index.js"
let tabs = reactive([
    {
        text: "全部",
        status: "",
    },
    {
        text: "待付款",
        status: "0",
    },
    {
        text: "待确认",
        status: "1",
    },

    {
        text: "待发货",
        status: "2",
    },
    {
        text: "已发货",
        status: "3",
    },
    {
        text: "交易完成",
        status: "4",
    },
]);
const list = ref([]);//数据源
const pageNumber = ref(1)//第几页
const status = ref('')//订单的状态
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const active = ref(0);
const onLoad = () => {
    getOrderList(pageNumber.value++, status.value).then(res => {
        if (res.resultCode == 200) {
            if (res.data.list.length === 0) {
                finished.value = true;
            }
            list.value = list.value.concat(res.data.list)
            loading.value = false
        }
    })
};
// 监听
watch(active, (newVla, oldVal) => {
    status.value = tabs[newVla].status
    pageNumber.value = 1
    list.value = []

    onLoad()
})
</script>
<style lang="less" scoped>
.van-nav-bar {
    width: 100%;
}

.van-list {
    padding-top: 10px;
}

.order {
    width: 100%;
    margin: 0 5px;
    text-align: left;

    .top {
        display: flex;
        justify-content: space-between;
        align-content: center;
        padding: 0 2px;

        span {
            padding: 0 2px;
        }
    }

    .cent {
        width: 100%;
        margin-top: 10px;
        background: rgba(252, 249, 249, 0.933);

    }

    .total {
        text-align: right;
        margin-right: 5px;
        color: rgb(83, 85, 85);
        font-size: 16px;
        margin-top: 5px;
    }
}
</style>